<template>
    <div>
        <!-- 查询区域 -->
        <div>
            <!-- 查询审批列表 -->
            <div style="margin-bottom: 20px;">
                <el-radio-group v-model="searchData.ApproveReservationStatus" size="large" @change="getApp">
                    <el-radio-button label="待审批" :value="0" />
                    <el-radio-button label="已审批" :value="1" />
                </el-radio-group>
                <div style="margin-top: 15px;">
                    <el-input v-model="searchData.ThemeName" style="width: 200px; margin-right: 10px;"
                        placeholder="请输入会议主题"></el-input>
                    <el-input v-model="searchData.Location" style="width: 200px; margin-right: 10px;"
                        placeholder="请输入会议室名称"></el-input>
                    <el-date-picker v-model="searchData.MeetingDate" type="date" placeholder="请选择会议日期"
                        style="width: 200px; margin-right: 10px;" @change="getApp"></el-date-picker>
                    <el-button type="primary" @click="getApp">查询</el-button>
                    <el-button @click="resetSearch">重置</el-button>
                </div>
            </div>

            <!-- 列表区域 -->
            <!-- 显示审批列表 -->
            <el-card>
                <el-table :data="tableData" style="width: 100%">
                    <el-table-column fixed prop="location" label="会议室" width="150" />
                    <el-table-column prop="themeName" label="会议主题" width="120" />
                    <el-table-column prop="hostName" label="主持人" width="120" />
                    <el-table-column prop="begingTime" label="开始时间" width="200">
                        <template #default=scope>
                            {{ moment(scope.row.begingTime).format("YYYY-MM-DD HH:mm:ss") }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="endTime" label="结束时间" width="200">
                        <template #default=scope>
                            {{ moment(scope.row.endTime).format("YYYY-MM-DD HH:mm:ss") }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="joinName" label="参会人" width="240" />
                    <el-table-column prop="meetingDate" label="会议预约时间" width="200">
                        <template #default=scope>
                            {{ moment(scope.row.meetingDate).format("YYYY-MM-DD HH:mm:ss") }}
                        </template>
                    </el-table-column>
                    <el-table-column fixed="right" label="操作" min-width="120">
                        <template #default="scope">
                            <el-button link type="success" @click="upd(scope.row)">会议审批</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-card>
            <el-card>
                <table>
                    <tbody>
                        <tr>
                            <td>
                                <el-pagination v-model:current-page="page.pageIndex" v-model:page-size="page.pageSize"
                                    :page-sizes="[5, 7, 9, 10]" :background="true" layout="total,slot,sizes"
                                    :total="page.totalCount" prev-text="上一页" next-text="下一页">
                                    <template>
                                        当前页：{{ page.pageIndex }}每页显示：{{ page.pageSize }}/{{ page.totalPage }}条
                                    </template>
                                </el-pagination>
                            </td>



                            <td>
                                <el-pagination v-model:current-page="page.pageIndex" v-model:page-size="page.pageSize"
                                    :page-sizes="[5, 7, 9, 10]" :background="true" layout="slot, prev, pager, next"
                                    :total="page.totalCount" prev-text="上一页" next-text="下一页">
                                    <template>
                                        <el-button type="primary" @click="page.pageIndex = 1">首页</el-button>
                                    </template>
                                </el-pagination>
                            </td>




                            <td>
                                <el-pagination v-model:current-page="page.pageIndex" v-model:page-size="page.pageSize"
                                    :page-sizes="[5, 7, 9, 10]" :background="true" layout="slot,  jumper"
                                    :total="page.totalCount" prev-text="上一页" next-text="下一页">
                                    <template>
                                        <el-button type="primary"
                                            @click="page.pageIndex = page.totalCount">尾页</el-button>
                                    </template>
                                </el-pagination>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </el-card>


            <!-- 会议审批 -->
            <el-dialog v-model="dialogVisible" title="会议审批" width="500">
                <!-- 会议详情 -->
                <div>
                    <el-form :model="reservationdetail" label-width="110px">
                        <el-form-item label="会议名称">{{ reservationdetail.templateName }}</el-form-item>
                        <el-form-item label="会议时间">{{ reservationdetail.meetingDate }}</el-form-item>
                        <el-form-item label="参会人员">{{ reservationdetail.joinName }}</el-form-item>
                        <el-form-item label="会议地点">{{ reservationdetail.location }}</el-form-item>
                        <el-form-item label="会议内容">{{ reservationdetail.content }}</el-form-item>
                    </el-form>
                </div>

                <!-- 审批 -->
                <el-form style="max-width: 600px" :model="statulist" label-width="auto">
                    <el-form-item label="审批结果">
                        <el-radio-group v-model="statulist.approveStatus" size="large">
                            <el-radio-button label="通过" :value="1" />
                            <el-radio-button label="退回" :value="0" />
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="审批说明">
                        <el-input v-model="statulist.approveOpinion" maxlength="30" show-word-limit />
                    </el-form-item>
                    <el-form-item label="审批人">
                        <el-input v-model="statulist.approveName" maxlength="30" show-word-limit />
                    </el-form-item>

                    <el-form-item>
                        <el-button type="primary" @click="updapp()">
                            确定
                        </el-button>
                        <el-button @click="dialogVisible = false">取消</el-button>
                    </el-form-item>
                </el-form>
            </el-dialog>
        </div>


    </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import axios from 'axios'
import { ElMessageBox, ElMessage } from 'element-plus'

const tableData = ref([])


const page = reactive({
    totalCount: 0,
    totalPage: 0,
    pageIndex: 1,
    pageSize: 5
})

const GetList = async () => {
    const res = await axios.get('http://localhost:5161/api/MeetingReservation/GetApprove', {
        params: {
            PageIndex: page.pageIndex,
            PageSize: page.pageSize

        }
    }).then((res) => {
        tableData.value = res.data.data.data,
            page.totalCount = res.data.data.totalCount,
            page.totalPage = res.data.data.totalPage
    })
}

onMounted(() => {
    GetList()
})



const onSearch = () => {
    page.pageIndex = 1
    GetList()
}





//获取会议详情
const viewDialogVisible = ref(false)
const reservationdetail = reactive({
    isDel: false,
    meetingReservationId: 0,
    templateName: "",
    themeName: "",
    meetingRoomId: 0,
    hostName: "",
    meetingDate: "",
    begingTime: "",
    endTime: "",
    joinName: "",
    content: "",
    isRegister: 0,
    isPassword: 0,
    passwordMessage: "",
    isNotice: 0,
    teleconference: 0,
    reservationStatus: 0,
    location: ""
})


//审批
const dialogVisible = ref(false)
const statulist = reactive({
    apprroveId: 0,
    approveName: "",
    approveOpinion: "",
    approveStatus: 0,
    meetingreservationId: 0
})

const upd = async (row: any) => {
    dialogVisible.value = true
    statulist.apprroveId = row.approveReservationId;
    statulist.approveName = row.approveName;
    statulist.approveOpinion = row.approveOpinion;
    statulist.approveStatus = row.approveStatus;
    statulist.meetingreservationId = row.meetingReservationId;

    // 重置表单字段
    Object.assign(statulist, {
        approveReservationId: 0,
        approveReservationName: "",
        approveReservationOpinion: "",
        approveReservationStatus: 0,
        meetingReservationId: row.meetingreservationId
    })
    console.log('传入的会议ID:', row.meetingReservationId);
    const params = {
        reservationId: row.meetingReservationId
    }
    await getReservationDetail(params)
        .then(res => {
            if (res.data.code == 1) {
                viewDialogVisible.value = true
                Object.assign(reservationdetail, res.data.data[0])
                // router.push({ path: '/reserdetail', query: { reservationId: meetingReservationId } });
            } else {
                ElMessage.error(res.data.msg || '未找到指定的会议预约信息');
            }
        })
        .catch(error => {
            console.error('获取会议详情失败:', error);
            ElMessage.error('获取会议详情失败，请稍后再试');
        })
}

//审批
const updapp = async () => {
    await UpdApprove(statulist.apprroveId, statulist.approveName, statulist.approveOpinion, statulist.approveStatus, statulist.meetingreservationId)
        .then(res => {
            if (res.data.code == 1) {
                ElMessage.success(res.data.message)
                dialogVisible.value = false; // 保存成功后关闭弹窗
                getApp() // 刷新列表
            }
            else {
                ElMessage.error(res.data.message)
            }
        })
        .catch((error: any) => {
            console.error('审批失败:', error)
            ElMessage.error('网络错误，请稍后再试');
        })
}

//查询重置
const resetSearch = () => {
    searchData.PageIndex = 1,
        searchData.PageSize = 100,
        searchData.Location = "",
        searchData.ThemeName = "",
        searchData.MeetingDate = "",
        searchData.ApproveReservationStatus = 0,
        searchData.totalCount = 0,
        searchData.totalPage = 0
    getApp()
}

//显示审批列表
const tableData = ref([])
const searchData = reactive({
    PageIndex: 1,
    PageSize: 100,
    Location: "",
    ThemeName: "",
    MeetingDate: "",
    ApproveReservationStatus: 0,
    totalCount: 0,
    totalPage: 0
})
const getApp = async () => {
    const params = {
        PageIndex: searchData.PageIndex,
        PageSize: searchData.PageSize,
        Location: searchData.Location,
        ThemeName: searchData.ThemeName,
        MeetingDate: searchData.MeetingDate,
        ApproveReservationStatus: searchData.ApproveReservationStatus,
        totalCount: searchData.totalCount,
        totalPage: searchData.totalPage
    }
    await getApprove(params)
        .then((res: any) => {
            tableData.value = res.data.data.data
            searchData.totalCount = res.data.data.totalCount
            searchData.totalPage = res.data.data.totalPage
        })
}

</script>

<style>
/* 样式代码保持不变 */
</style>
